// 公共头部
var a=1;
let topHtml =`<a class="logo" :href="top.logoStyle.logoHref" :style="top.logoStyle"></a>
                <i class="top-icon justify-content left" :class="{'el-icon-menu':top.topIcon.menu}" @click="changeisCollapse"></i>
                <i class="top-icon justify-content left" :class="{'el-icon-rank':top.topIcon.rank}" @click="changefullScreen"></i>
                <el-dropdown class="right top-more">
                    <i class="top-icon justify-content" :class="{'el-icon-more':top.topIcon.more}"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(Item,index) in top.dropdownItem" :divided="index===top.dropdownItem.length-1" :key="index">{{Item.title}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <i class="username justify-content right">{{top.userName}}</i>` ;
$(".top").html(topHtml);

// 公共侧边栏
let slideHtml = `<el-menu
                    :default-active="slide.defaultActive"
                    class="el-menu-vertical-demo menu"
                    @open="menuOpen"
                    @close="menuClose"
                    @select="menuSelect"
                    :collapse="top.isCollapse"
                    :collapse-transition="false"
                    >
                <!--子菜单/多级菜单-->
                <div class="slidebar" v-for="(submenu,index) in slide.submenu">
                    <el-submenu v-if="submenu.submenu!==undefined&&submenu.submenu.length>0" :index="submenu.index">
                        <template slot="title">
                            <i :class="submenu.icon"></i>
                            <span>{{submenu.subTitle}}</span>
                        </template>
                        <div v-for="submenu1 in submenu.submenu">
                            <el-submenu v-if="submenu1.submenu!==undefined&&submenu1.submenu.length>0" :index="submenu1.index">
                                <template slot="title">
                                    <i :class="submenu1.icon"></i>
                                    <span>{{submenu1.subTitle}}</span>
                                </template>
                                <a v-for="submenu2 in submenu1.submenu" :href="submenu2.href">
                                    <el-menu-item :index="submenu2.index">
                                        <i :class="submenu2.icon"></i>
                                        <span>{{submenu2.subTitle}}</span>
                                    </el-menu-item>
                                </a>
                            </el-submenu>
                            <a v-else :href="submenu1.href">
                                <el-menu-item :index="submenu1.index">
                                    <i :class="submenu1.icon"></i>
                                    <span slot="title">{{submenu1.subTitle}}</span>
                                </el-menu-item>
                            </a>
                        </div>
                    </el-submenu>
                    
                    <a v-else :href="submenu.href">
                        <el-menu-item :index="submenu.index">
                            <i :class="submenu.icon"></i>
                            <span slot="title">{{submenu.subTitle}}</span>
                        </el-menu-item>
                    </a>
                </div>
            </el-menu>`;

$(".slide").html(slideHtml);

// 公共尾部
let footHtml = `<div><p>{{foot.p1}}</p><p>{{foot.p2}}</p></div>`;
$(".footer").html(footHtml);

// 公共数据
let vm = new Vue({
    el:'#app',
    data:function(){
        return {
            top:{
                isCollapse:false,//是否折叠
                fullScreen:false,//是否全屏
                userName:"用户名",
                logoStyle:{//logo的图片和样式
                    background:"url('../image/logo-white.png') center no-repeat",
                    backgroundSize:"auto 50px",
                    logoHref:"#"
                },
                topIcon:{
                    menu:"el-icon-menu",
                    rank:"el-icon-rank",
                    more:"el-icon-more"
                },
                dropdownItem:[//头部更多选项
                    {
                        title:"关于我们"
                    },
                    {
                        title:"修改密码"
                    },
                    {
                        title:"退出登录"
                    }
                ]
            },
            slide:{
                defaultActive:"1-1-1",//当前选中的菜单
                submenu:[//侧边栏菜单数据
                    {
                        index:"1",
                        icon:'el-icon-menu',
                        subTitle:'肉',
                        href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                        submenu:[
                            {
                                index:"1-1",
                                icon:'el-icon-edit',
                                subTitle:'猪肉',
                                submenu:[
                                    {
                                        index:"1-1-1",
                                        icon:'el-icon-edit-outline',
                                        subTitle:'排骨',
                                        href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                                    },
                                    {
                                        index:"1-1-2",
                                        icon:'el-icon-edit-outline',
                                        subTitle:'五花肉',
                                        href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                                    },
                                    {
                                        index:"1-1-3",
                                        icon:'el-icon-edit-outline',
                                        subTitle:'里脊',
                                        href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                                    }
                                ]
                            },
                            {
                                index:"1-2",
                                icon:'el-icon-edit',
                                subTitle:'牛肉',
                                href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                            }
                        ]

                    },
                    {
                        index:'2',
                        icon:'el-icon-bell',
                        subTitle:'早餐',
                        href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                    },
                    {
                        index:'3',
                        icon:'el-icon-view',
                        subTitle:'蔬菜',
                        submenu:[
                            {
                                index:"3-1",
                                icon:'el-icon-edit',
                                subTitle:'玉米',
                                href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                            },
                            {
                                index:"3-2",
                                icon:'el-icon-edit',
                                subTitle:'茄子',
                                href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                            }
                        ]
                    },
                    {
                        index:'4',
                        icon:'el-icon-view',
                        subTitle:'面粉',
                        submenu:[
                            {
                                index:"4-1",
                                icon:'el-icon-edit',
                                subTitle:'蛋糕',
                                href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                            },
                            {
                                index:"4-2",
                                icon:'el-icon-edit',
                                subTitle:'面包',
                                href:'http://element-cn.eleme.io/#/zh-CN/component/installation',
                            }
                        ]
                    }
                ]
            },
            main:{},
            foot:{
                p1:"聆听所至，信诚所在",
                p2:"copyright@xincheng"
            }
        }
    },
    created:function(){
        // this.loading = false;
    },
    methods: {
        menuOpen:function(key, keyPath) {//打开侧边栏联动菜单
            console.log(key, keyPath);
        },
        menuClose:function(key, keyPath) {//关闭侧边栏联动菜单
            console.log(key, keyPath);
        },
        menuSelect:function(key, keyPath){//选中菜单项
            console.log(key, keyPath);
        },
        changeisCollapse:function(){//侧边栏是否折叠
            this.top.isCollapse=!this.top.isCollapse;
        },
        changefullScreen:function(){//是否全屏
            let element = document.documentElement;
            let isFullScreen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;//true:非全屏，false：全屏
            if (isFullScreen) {//实现全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                this.top.fullScreen = true;
            } else {//取消全屏
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
                this.top.fullScreen = false;
            }
        },
        methods:function(methodName,data){//可调用的自定义的方法,根据data的数据调取相对应的方法
            this.$emit(methodName,data)
        }
    }
});